<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  {{info}}
  <!--v-for循环遍历 遍历的过程中创建当前元素,用法类似Java的新循环-->
  <h1 v-for="name in arr">{{name}}</h1>

  <table border="1">
    <caption>人物列表</caption>
    <tr>
      <th>名字</th><th>年龄</th><th>性别</th>
    </tr>
    <tr v-for="p in persons">
      <td>{{p.name}}</td><td>{{p.age}}</td><td>{{p.gender}}</td>
    </tr>
  </table>
  <table border="1">
    <caption>商品列表</caption>
    <tr><th>标题</th><th>价格</th><th>库存</th></tr>
    <tr v-for="p in products">
      <td>{{p.title}}</td><td>{{p.price}}</td>
      <td>{{p.num}}</td>
    </tr>
  </table>

</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
  let v = new Vue({
    el:"body>div",
    data:{
      info:"循环遍历",
      arr:["刘备","关羽","张飞"],
      persons:[{name:"刘备",age:30,gender:"男"},
        {name:"孙尚香",age:60,gender:"女"},
        {name:"刘禅",age:80,gender:"男"}],
      products:[{title:"冰红茶",price:3,num:1000},
        {title:"脉动",price:4,num:2000},
        {title:"元气森林",price:5,num:500}]
    }
  })
</script>
</body>
</html>